<template>
  <div class="progress-demo">
    <!-- 基础进度条 -->
    <div class="demo-section">
      <h3>基础进度条</h3>
      <van-progress :percentage="50"  class="base"/>
    </div>

    <!-- 带文字的进度条 -->
    <div class="demo-section">
      <h3>带文字的进度条</h3>
      <van-progress :percentage="textPercent" :show-pivot="true" class="base-text"/>
      <div class="control-buttons">
        <van-button size="small" type="primary" @click="textPercent = Math.max(0, textPercent - 10)">
          减少
        </van-button>
        <van-button size="small" type="primary" @click="textPercent = Math.min(100, textPercent + 10)">
          增加
        </van-button>
      </div>
    </div>

    <!-- 自定义样式 -->
    <div class="demo-section">
      <h3>自定义样式</h3>
      <van-progress 
        :percentage="75" 
        color="#f2826a"
        :stroke-width="8"
      />
      <van-progress 
        :percentage="100" 
        :pivot-text="'完成'"
        color="#07c160"
        :stroke-width="8"
      />
      <van-progress 
        :percentage="25" 
        color="linear-gradient(to right, #be99ff, #7232dd)"
        :stroke-width="8"
      />
    </div>

    <!-- 环形进度条 -->
    <div class="demo-section">
      <h3>环形进度条</h3>
      <div class="circle-progress-container">
        <van-circle
          v-model:current-rate="circlePercent1"
          :rate="100"
          :speed="100"
          :text="circleText1"
          size="120px"
          color="#07c160"
        />
        <van-circle
          v-model:current-rate="circlePercent2"
          :rate="100"
          :speed="100"
          :text="circleText2"
          size="120px"
          layer-color="#ebedf0"
          color="linear-gradient(to right, #be99ff, #7232dd)"
        />
      </div>
      <div class="control-buttons">
        <van-button size="small" type="primary" @click="startCircleProgress">
          开始进度
        </van-button>
        <van-button size="small" type="danger" @click="resetCircleProgress">
          重置
        </van-button>
      </div>
    </div>

    <!-- 动态进度条 -->
    <div class="demo-section">
      <h3>动态进度条</h3>
      <van-progress 
        :percentage="dynamicPercent" 
        :pivot-text="dynamicText"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
      />
      <div class="control-buttons">
        <van-button size="small" type="primary" @click="startProgress">
          开始加载
        </van-button>
        <van-button size="small" type="danger" @click="resetProgress">
          重置
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 带文字的进度条
const textPercent = ref(50)

// 环形进度条
const circlePercent1 = ref(0)
const circlePercent2 = ref(0)
const circleText1 = computed(() => `${circlePercent1.value}%`)
const circleText2 = computed(() => `${circlePercent2.value}%`)

// 动态进度条
const dynamicPercent = ref(0)
const dynamicText = computed(() => {
  if (dynamicPercent.value === 100) return '完成'
  return `${dynamicPercent.value}%`
})

// 开始环形进度
const startCircleProgress = () => {
  circlePercent1.value = 0
  circlePercent2.value = 0
  const timer = setInterval(() => {
    circlePercent1.value++
    circlePercent2.value++
    if (circlePercent1.value >= 100) {
      clearInterval(timer)
    }
  }, 50)
}

// 重置环形进度
const resetCircleProgress = () => {
  circlePercent1.value = 0
  circlePercent2.value = 0
}

// 开始动态进度
const startProgress = () => {
  dynamicPercent.value = 0
  const timer = setInterval(() => {
    dynamicPercent.value++
    if (dynamicPercent.value >= 100) {
      clearInterval(timer)
    }
  }, 30)
}

// 重置动态进度
const resetProgress = () => {
  dynamicPercent.value = 0
}
</script>

<style scoped>
.progress-demo {
  padding: 20px;
}

.demo-section {
  margin-bottom: 24px;
}

.demo-section h3 {
  margin-bottom: 16px;
  color: #323233;
  font-weight: normal;
  font-size: 14px;
}

.demo-section .van-progress {
  margin: 10px 0;
}

.control-buttons {
  margin-top: 12px;
  display: flex;
  gap: 12px;
}

.circle-progress-container {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

/* 自定义进度条样式 */
:deep(.van-progress__pivot) {
  background-color: transparent;
}

.base ::v-deep .van-progress__pivot {
  color: #000;
  top:-10px;
}

.base-text ::v-deep .van-progress__pivot {
  color: #000;
  top:-10px;
}

:deep(.van-circle) {
  display: inline-block;
}
</style>
